<%-- 
  - Author: Abed Yaseen
  - Date: 29-Jan-2011
  - Copyright Notice: TRAKHEES
  - Description: login.jsp
 --%>

<%@ include file="/WEB-INF/view/include.jsp"%>
<%@ page import="ae.pcfc.cldos.online.web.*"%>

<link href="resources/styles/validation/jquery.validity.css" rel="stylesheet" type="text/css" />
<link href="resources/styles/validation/style.css"	rel="stylesheet" type="text/css" />
<link href="resources/styles/validation/jquery.validity.css" rel="stylesheet" type="text/css" />
<link rel=stylesheet type=text/css href="resources/styles/jquery.qtip.css" />	
<script type="text/javascript" charset="utf-8" src="resources/js/ui/jquery.qtip.js"></script>


<script type="text/javascript">
	$(document).ready(function() {
						//$("input:submit").button();
						$("#Login")
								.validate(
										{
											onfocusout : false,
											onkeyup : false,
											//onclick: false,			
											rules : {
												strUserName : "required",
												strPassword : "required"

											},
											showErrors : function(errorMap,
													errorList) {

												var errors = '<ul>';
												var label;
												if (errorList.length) {
													$.each(errorMap, function(
															name, value) {
														label = $(
																"label[for='"
																		+ name
																		+ "']")
																.html();
														label = value + '['
																+ label + ']';
														errors = errors
																+ '<li>'
																+ label
																+ '</li>';

													});
													errors = errors + '</ul>';
													jAlert('error', errors,
															'<spring:message code="label.errormessage" />');
												}
											}
										});
					});
</script>

<script type="text/javascript">
/*$(function() {
	
	 $('.tooltip').showBalloon({}).toggle(
			    function(){ $(this).hideBalloon(); },
			    function(){ $(this).showBalloon(); }
			  );
	
	
  
}); 

$(function() {
	  $('.tooltipLeft').balloon({ position: "left", 
		  css: {
			   	
			    lineHeight: '3',		    
			    padding: '10px'
			  } });
	}); */
	
	$(function() {

		$('.tooltip').qtip({
			 position: {
		         my: 'bottom left',
		         at: 'top center',		        
		         viewport: $(window) // ...and make sure it stays on-screen if possib
			 },
		   title: {
	     	   text: 'My ',
			   	button: true

		      },
		   style: {
		      tip: {
		         corner: true        
				},
				classes: 'ui-tooltip-shadow ui-tooltip-blue'
		   }
		});

	}); 
	
</script>

<div id="container" dir='<spring:message code="page.dir"/>'
	align='<spring:message code="page.align"/>'>	
	<form
		action="${pageContext.request.contextPath}/login"
		method="POST">

		<c:if test="${param.error != null}">
			<script type="text/javascript">
				$(document)
						.ready(
								function() {
									jAlert(
											'error',
											'<spring:message code="error.login.unsuccess" />.<br/><spring:message code="error.login.unsuccess.reason" />: <c:out value="${SPRING_SECURITY_LAST_EXCEPTION.message}"/>', '<spring:message code="label.errormessage" />');
								});
			</script>
		</c:if>

		<fieldset>
			<legend>
				<spring:message code="label.client.login" />
			</legend>
		</fieldset>
		<div class="t_form-left">
		
				<spring:message code="label.login.message" />
				<a href="register/newclient/form.htm" ><spring:message code="label.login.clickhere" /></a>
				<img class="tooltip" src='<c:url value="resources/images/question.png"/>' id="click_here" title="<spring:message code="title.client.tksid.pin" />" >
			<br />

				<label for="login" ><spring:message code="label.client.username" /><span class="required-field"><spring:message code="label.field.required" /></span></label> 
				<input type='text' id='login' name='login' size="30" maxlength="100" />

				<label for="password" ><spring:message code="label.client.password" /><span class="required-field"><spring:message code="label.field.required" /></span></label> 
				<input type="password" id='password' name='password' size="30" maxlength="100" />

			
				<div class="fm-opt">
					<label>
						<span style="font-size: xx-small; font-weight: normal;"><spring:message code="client.remember.password" /></span>
						<img class="tooltip" src='<c:url value="resources/images/question.png"/>' title="<spring:message code="title.remember.password" />" >
					</label>
					<input type="checkbox"	name="rememberMe" id="rememberMe">
				</div>

			<br />
			
			<div id="fm-submit">
				<input type="submit" name="submit"	value="<spring:message code="label.button.submit" />" />
			</div>
		</div>	
		<div class="t_form-right">
				<a href="register/password/form.htm">
					<spring:message	code="client.forgot.password" /> 
				</a>
				<img class="tooltip" src='<c:url value="resources/images/question.png"/>' title="<spring:message code="title.forgot.password" />" >		
						
				<br /> 
				<a	href="register/inquirestatus/form.htm">
					<spring:message	code="client.inquire.status" /> </a>
				
				<img class="tooltip" src='<c:url value="resources/images/question.png"/>' title="<spring:message code="title.inquire.status" />">
				<br /> 
				
				<a	href="register/recallpin/form.htm">
					<spring:message	code="client.recall.pin" /> </a>
					<img class="tooltip" src='<c:url value="resources/images/question.png"/>' title="<spring:message code="title.recall.pin" />" >		
				<br />
		</div>

	</form>
</div>